<template>
    <div class="about">
        <div class="bannder">
            <img src="https://img601.yun300.cn/repository/image/b4eb80d3-446d-4fef-865e-d22a130c8317.jpg?tenantId=215997&viewType=1&k=1642041118000"
                alt="">
        </div>
        <div class="list">
            <div class="item" v-for="(item,index) in list" :key="index">
                <div class="left">
                    <div class="xian"></div>
                    <div class="txtbox">
                        <!-- 点击获取下标,跳转携带参数详情页面,不定义方法直接在@click定义语句 -->
                        <div class="name" @click="$router.push({name:'details',query:{id:index}})">
                        {{ item.name }}
                    </div>
                    <div class="txt">
                        {{ item.txt }}
                    </div>
                    </div>

                </div>
                <div class="right">
                    <img :src="item.img" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
// @ is an alias to /src

export default {
    data() {
        return {
            list: [
                {
                    name:'（“三十而已”浦东谈）徐枫：汤臣的“血缘”就在浦东这块土地上',
                    txt:'（“三十而已”浦东谈）徐枫：汤臣的“血缘”就在浦东这块土地上',
                    img:'https://img601.yun300.cn/repository/image/92ddb2c5-c4de-4abd-baf0-3f6236607d14.jpg?tenantId=215997&viewType=1'
                },
                {
                    name:'上海浦东开发开放三十周年，汤臣集团共同参与“筑梦浦东”',
                    txt:'1990年4月18日，国家正式宣布开发开放浦东，上海开始向全世界展示独特城市风采，两年之后，汇集全球智慧的陆家嘴城市规划正式启动，由浦东开发起始，唤起了上海的新兴与腾飞。',
                    img:'https://img601.yun300.cn/repository/image/0168a347-12db-42a8-9067-df449755090a.png?tenantId=215997&viewType=1'
                },
                {
                    name:'庆祝浦东开发开放30周年，汤臣集团董事长徐枫分享当年的故事',
                    txt:'汤君年是南汇（编者按：今属浦东新区）人，1948年在上海出生，4岁跟随父亲到香港定居。',
                    img:'https://img601.yun300.cn/repository/image/2ff457be-c21d-43ff-8984-8f26bff5cf75.jpg?tenantId=215997&viewType=1'
                }
            ]
        }
    },

}
</script>
<style lang="less" scoped>
.bannder {
    width: 100%;
    height: 400px;

    img {
        width: 100%;
        height: 100%;
    }
}
.list{
    text-align: left;
    .item{
        display: flex;
        justify-content: space-between;
        width: 75%;
        margin: 80px auto 0;
    }
    .left{
        width: 60%;
        display: flex;
        align-items: center;
        .xian{
            width: 50px;
            height: 1px;
            background: #808080;
            transition: 1s;
        }
        .txtbox{
            width: calc(100% - 70px);
            margin-left: 20px;
            transition: 1s;
            .name{
                font-size: 22px;
                margin-bottom: 10px;
            }
            .name:hover{
                cursor: pointer;
            }
            .txt{
                color: #808080;
            }
        }
    }
    img{
        width: 240px;
        height: 200px;
    }
    .item:hover .xian{
        width: 100px;
    }
    .item:hover .txtbox{
        width: calc(100% - 120px);

    }
}


</style>